<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2023/10/12
  Time: 18:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>调动信息</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
<div id="app">
    <el-form ref="form" :model="timeform" label-width="80px">
        <div style="display:flex">
            <el-date-picker
                    v-model="beginendtime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd">
            </el-date-picker>

            <el-form-item>
                <el-button type="primary" @click="searchtime">搜索</el-button>
            </el-form-item>
        </div>
    </el-form>
    <%--    调动展示的表格--%>
    <div v-if="tableData.length>0">
        <template>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="sid"
                        label="调动编号">
                </el-table-column>
                <el-table-column
                        prop="staffname"
                        label="员工姓名">
                </el-table-column>
                <el-table-column
                        prop="branchname"
                        label="所属分店">
                </el-table-column>
                <el-table-column
                        prop="deptname"
                        label="部门名称">
                </el-table-column>
                <el-table-column
                        prop="rolename"
                        label="旧职位名称">
                </el-table-column>
                <el-table-column
                        prop="newbranchname"
                        label="新所属分店">
                </el-table-column>
                </el-table-column>
                <el-table-column
                        prop="newdeptname"
                        label="新部门名称">
                </el-table-column>
                <el-table-column
                        prop="rolename"
                        label="新职位名称">
                </el-table-column>
                <el-table-column
                        prop="transfertime"
                        label="执行时间">
                </el-table-column>
                <el-table-column
                        prop="transferpername"
                        label="执行人">
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5,10,15,20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </template>
    </div>
    <div v-else>
        <el-empty description="该查询暂无审核数据！">
            <el-button @click="flushed" type="primary">点击刷新</el-button>
        </el-empty>
    </div>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            inittableData: [],
            //显示的表单
            tableData: [],
            form: {},
            //时间表单
            timeform: {},
            //起止时间
            beginendtime: [],
            //当前页码
            currentPage: 1,
            //每页默认条数
            pageSize: 5,
            //总条数
            total: 0,
        },
        created() {
            this.inittableDatainfo();

        },
        methods: {
            inittableDatainfo() {
                axios.post("/transferco/list?currentPage=" + this.currentPage + '&pageSize=' + this.pageSize+"&time="+this.beginendtime).then(function (res) {
                    console.log(res)
                    app.tableData = res.data.data.list;
                    app.total=res.data.data.total;
                })
            },
            searchtime() {
                console.log(this.beginendtime);
                this.inittableDatainfo();

            },
            /*
          改变页面大小函数
           */
            handleSizeChange(val) {
                this.pageSize = val;
                this.inittableDatainfo();
            },
            /*
            改变显示页码的函数
             */
            handleCurrentChange(val) {
                this.currentPage = val;
                this.inittableDatainfo();
            },
            //数据为空点击刷新
            flushed() {
                this.timeform = {};
                this.beginendtime=[];
                this.inittableDatainfo();
            },
        }
    })
</script>
</body>
</html>
